<script setup lang="ts">
import {ref} from "vue";
import {bytesToSize} from "../../../common/util/byteUtil";

const zt = ref("jcz")

const updateInfo = ref({})

window.api.on("checking-for-update", checkForUpdate)
window.api.on("update-available", updateAvailable)
window.api.on("update-not-available", updateNotAvailable)
window.api.on("error", handleError)
window.api.on("download-progress", handleDownloadProgress)
window.api.on("update-downloaded", downloaded)

function checkForUpdate() {
  zt.value = 'jcz'
}

const progressObj = ref({
  bytesPerSecond: 0,
  transferred: 0,
  percent: 0,
  total: 0
})

function updateAvailable(info) {
  zt.value = 'yxbb'
  progressObj.value.total = info.files[0].size
  updateInfo.value = info
}

function updateNotAvailable() {
  zt.value = 'wxbb'
}

function download() {
  zt.value = 'xzz'
  window.api.downloadUpdate()
}

function handleDownloadProgress(progress) {
  zt.value = 'xzz'
  progressObj.value = {...progress, percent: Math.round(progress.percent * 100) / 100}
}

const errmsg = ref("")

function handleError(error) {
  zt.value = 'error'
  errmsg.value = error.message
}

function downloaded() {
  zt.value = 'xzwc'
  quitAndInstall()
}

function quitAndInstall() {
  window.api.quitAndInstall()
}

</script>

<template>
  <div v-if="zt=='jcz'" style="height: 100%;box-sizing: border-box;padding-left: 50px;">
    <div
        style="height:calc(100% - 85px);box-sizing: border-box">
      <div style="font-size: 32px;margin-top: 75px">努力检测中...</div>
    </div>
  </div>
  <div v-if="zt=='yxbb'" style="height: 100%;box-sizing: border-box;padding-left: 50px;">
    <div
        style="height:calc(100% - 85px);box-sizing: border-box">
      <div style="margin-top: 15px">
        <span style="font-size: 32px;">发现新版嘎嘎猛打印</span>
        <span style="line-height: 30px;font-size: 14px;margin-left: 15px">{{ updateInfo.version }}</span>
      </div>
      <div style="margin-top: 10px;font-size: 14px;height: calc(100% - 55px);">
        <span>嘎嘎猛打印全面升级</span>
        <div style="height: calc(100% - 19px);overflow-y: auto">
          <div v-for="(item,idx) in updateInfo.releaseNotes">
            <pre>{{ item.note }}</pre>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-button @click="download" type="primary" style="height: 30px;">一键升级（{{
          bytesToSize(progressObj.total)
        }}）
      </el-button>
    </div>
  </div>
  <div v-if="zt=='wxbb'" style="height: 100%;box-sizing: border-box;padding-left: 50px;">
    <div
        style="box-sizing: border-box">
      <div style="font-size: 32px;margin-top: 70px">嘎嘎猛打印 已经是最新版本</div>
      <div style="line-height: 30px;font-size: 14px">{{ updateInfo.version }}</div>
    </div>
  </div>
  <div v-if="zt=='xzz'" style="height: 100%;box-sizing: border-box;padding-left: 30px;padding-right: 30px">
    <div
        style="height:calc(100% - 70px);box-sizing: border-box">
      <div style="font-size: 32px;margin-top: 15px">下载中</div>
      <div style="line-height: 30px;font-size: 14px">{{ updateInfo.version }}</div>
      <div style="margin-top: 10px;font-size: 14px;height: calc(100% - 80px);">
        <span>嘎嘎猛打印全面升级</span>
        <div style="height: calc(100% - 19px);overflow-y: auto">
          <div v-for="(item,idx) in updateInfo.releaseNotes">
            <pre>{{ item.note }}</pre>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="font-size: 14px;line-height: 25px">
        速度：{{ bytesToSize(progressObj.bytesPerSecond) }}/s，已下载：{{ bytesToSize(progressObj.transferred) }} /
        {{ bytesToSize(progressObj.total) }}
      </div>
      <el-progress :percentage="progressObj.percent"></el-progress>
    </div>
  </div>
  <div v-if="zt=='xzwc'" style="height: 100%;box-sizing: border-box;padding-left: 40px;">
    <div
        style="box-sizing: border-box">
      <div style="font-size: 32px;margin-top: 30px">升级中</div>
      <div style="line-height: 30px;font-size: 14px">{{ updateInfo.version }}</div>
    </div>
    <!--    <div style="margin-top: 35px">-->
    <!--      <el-button type="primary" style="width: 100px;height: 30px;" @click="quitAndInstall">马上安装</el-button>-->
    <!--    </div>-->
  </div>
  <div v-if="zt=='error'" style="height: 100%;box-sizing: border-box;padding-left: 40px;">
    <div style="box-sizing: border-box">
      <div style="font-size: 32px;margin-top: 30px">更新出错了</div>
    </div>
  </div>
</template>

<style scoped lang="less">
.btn-box {
  height: 39px;
  align-content: end;
  text-align: end;

  button {
    width: 75px
  }
}
</style>
